<template>
  <div>
    <section class="haruyuki-bg-color-white">
      <!-- 基础信息 -->
      <div class="haruyuki-flex-space-between haruyuki-align-items-center haruyuki-mb-10">
        <div class="haruyuki-size-16">
          <i class="el-icon-info"></i>
          <span class="haruyuki-ml-6">基础信息</span>
        </div>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <span>商户编号：{{ basicData.rpiNo }}</span>
          </el-col>
          <el-col :span="8">
            <span>商户名称：{{ basicData.rpiName }}</span>
          </el-col>
          <el-col :span="8">
            <span>服务商编号：{{ basicData.serviceNo }}</span>
          </el-col>
          <el-col :span="8">
            <span>服务商名称：{{ basicData.serviceName }}</span>
          </el-col>
          <el-col :span="8">
            <span>项目编号：{{ basicData.projectCode }}</span>
          </el-col>
          <el-col :span="8">
            <span>项目名称：{{ basicData.projectName }}</span>
          </el-col>
        </el-row>
      </div>

      <!-- 分账信息 -->
      <div class="haruyuki-flex-space-between haruyuki-align-items-center haruyuki-mb-10">
        <div class="haruyuki-size-16">
          <i class="el-icon-money"></i>
          <span class="haruyuki-ml-6">分账信息</span>
        </div>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <span>通道简称：{{ basicData.aisleKindName }}</span>
          </el-col>
          <el-col :span="8">
            <span>通道商名称：{{ basicData.aisleCompanyName }}</span>
          </el-col>
          <el-col :span="8">
            <span>通道名称：{{ basicData.aisleName }}</span>
          </el-col>
          <el-col :span="8">
            <span>分账种类：{{ basicData.divisionKindName }}</span>
          </el-col>
          <el-col :span="8">
            <span>分账范围：{{ basicData.divisionScopeName }}</span>
          </el-col>
          <el-col :span="8">
            <span>分账类型：{{ basicData.divisionTypeName }}</span>
          </el-col>
          <el-col :span="8">
            <span>分账方式：{{ basicData.divisionModeName }}</span>
          </el-col>
          <el-col :span="8">
            <span>结算类型：{{ basicData.divisionSettleTypeName }}</span>
          </el-col>
          <el-col :span="8">
            <span>分账规则：{{ basicData.divisionRuleName }}</span>
          </el-col>
        </el-row>
      </div>

      <div class="haruyuki-flex-space-between haruyuki-align-items-center haruyuki-mb-10">
        <div class="haruyuki-size-16 haruyuki-mb-10">
          <i class="el-icon-menu"></i>
          <span class="haruyuki-ml-6">基础功能</span>
        </div>
      </div>
      <div class="haruyuki-content merchant-box">
        <div
          class="merchant-icon-func"
          style="margin-bottom: 30px"
          v-for="moduleItem in moduleData"
          :key="moduleItem.id"
        >
          <div v-if="moduleItem.show">
            <el-image
              class="cursor"
              style="width: 60px; height: 60px"
              :src="moduleItem.image"
              fit="fill"
              @click="moduleOperate(moduleItem.id)"
            ></el-image>
            <div class="cursor">{{ moduleItem.name }}</div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
  
  <script>
import { getDetail } from "@/api/rb-oem/separateMerchant/separate_merchant";
import { mapGetters } from "vuex";

export default {
  name: "MerchantDetails",
  props: {
    merchantId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      basicData: {
        rpiNo: "",
        rpiName: "",
        serviceNo: "",
        serviceName: "",
        projectCode: "",
        projectName: "",
        aisleCode: "",
        aisleCompanyCode: "",
        aisleCompanyName: "",
        aisleName: "",
        divisionKind: "",
        divisionKindName: "",
        divisionMode: "",
        divisionModeName: "",
        divisionRule: "",
        divisionRuleName: "",
        divisionScope: "",
        divisionScopeName: "",
        divisionSettleType: "",
        divisionSettleTypeName: "",
        divisionType: "",
        divisionTypeName: "",
        createTime: "",
      },
      moduleData: [
        {
          id: 1,
          name: "门店管理",
          image: "/img/merchant-icon/store.png",
          type: "store",
          show: true,
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["permission"]),
  },
  created() {
    this.getMerchantDetail();
  },
  methods: {
    getMerchantDetail() {
      getDetail(this.merchantId).then((res) => {
        if (res.data.success) {
          this.basicData = res.data.data;
        }
      });
    },
    /**
     * @func 商户模块管理
     * @desc 商户模块管理 操作控制
     * */
    moduleOperate(id) {
      switch (id) {
        case 1:
          this.getStorePage();
          break;
        case 2:
          break;
      }
    },
    /**
     * @func 商户模块管理-1(门店管理)
     * @desc 门店管理 store
     * */
     getStorePage() {
      this.$router.push({
        name: "分账门店管理",
        query: {
          rpiNo: this.basicData.rpiNo
        },
      });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.haruyuki-bg-color-white {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.haruyuki-content {
  padding: 20px;
  margin-bottom: 30px;
  .el-col {
    margin-bottom: 15px;
  }
}

.haruyuki-ml-6 {
  margin-left: 6px;
}

.haruyuki-mb-10 {
  margin-bottom: 10px;
}

.haruyuki-flex-space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.haruyuki-align-items-center {
  align-items: center;
}

.merchant-box {
  display: flex;
  // justify-content: space-between;
  flex-wrap: wrap;
  &.adaptive {
    width: 100%;
    margin-left: -10px;
    margin-right: -10px;
  }
  .merchant-item-content {
    display: flex;
    flex-direction: column;
    width: calc(100% / 3);
    span {
      padding-left: 10px;
      padding-right: 10px;
      margin-bottom: 8px;
    }
  }
  .merchant-icon-func {
    width: calc(100% / 5);
    margin-bottom: 20px;
    text-align: center;
    .cursor {
      cursor: pointer;
    }
  }
  .merchant-icon-card {
    width: calc(100% / 4);
    .item-card {
      // display: flex;
      border-radius: 10px;
      background-color: #ffffff;
      padding: 20px;
      text-align: center;
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 10px;
      .item-card-label {
        display: flex;
        align-items: center;
      }
      .item-card-content {
        display: flex;
        align-items: center;
        margin-top: 20px;
      }
    }
  }
}
</style>